<template>
  <view class="informationDetail_outer">
    <view class="record_header">
      <u-navbar
        :autoBack="true"
        height="152rpx"
        bgColor="#FFFAEF"
        :fixed="true"
        :border="true"
        :placeholder="true"
      >
        <view slot="left" class="record_header_back">
          <image src="@/static/record/goback.png"></image>
        </view>
        <view slot="center" class="record_header_title">文章详情</view>
      </u-navbar>
    </view>
    <view class="informationDetail_content">
      <view class="informationDetail_content_top">
        <text
          >{{ informationDetail.title }}</text
        >
      </view>
      <view class="informationDetail_content_center">
        <view class="informationDetail_content_center_left">
          <view>
            <u-avatar
              size="48rpx"
              src="https://cdn.uviewui.com/uview/album/2.jpg"
            ></u-avatar>
          </view>
          <view class="informationDetail_content_center_left_text"
            ><text>K70部落官方</text></view
          >
        </view>
        <view class="informationDetail_content_center_right">
          <text>{{informationDetail.createdAt  }}</text>
        </view>
      </view>
      <view class="informationDetail_content_down">
        <view class="informationDetail_content_down_img">
          <image mode="widthFix"
            :src="informationDetail.cover"
          ></image>
        </view>
        <view class="informationDetail_content_down_text">
            <u-parse :content="informationDetail.content"></u-parse>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { reqInformationDetail } from "@/api/informationDetail.js";
export default {
  data() {
    return {
      informationDetail: {},
    };
  },
  onLoad(option) {
    this.getInformationDetail(option.id);
  },
  methods: {
    // 请求资讯详情
    async getInformationDetail(id) {
      const result = await reqInformationDetail(id);
      if (result.code == 200) {
        this.informationDetail = result.data;
      } else {
        uni.showToast({
          title: "资讯详情请求失败",
          icon: "error",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/information/index",
          });
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.informationDetail_outer {
  width: 100vw;
  min-height: 100vh;
  background: #fffaef;

  .record_header {
    .record_header_title {
      font-size: 46rpx;
      font-family: DreamHanSansSC;
      font-weight: 600;
      color: #302b26;
    }
    .record_header_date {
      width: 199rpx;
      height: 48rpx;
      background: #f5f0e5;
      border: 1px solid #ffa814;
      border-radius: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      text {
        font-size: 25rpx;
        font-family: Dream Han Sans SC;
        font-weight: normal;
        color: #ffa814;
      }
    }
    .record_header_back {
      width: 46rpx;
      height: 46rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .informationDetail_content {
    border-top: 2rpx solid rgb(183, 178, 169, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    .informationDetail_content_top {
      width: 663rpx;
      height: 183rpx;
      font-size: 44rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      color: #302b26;
      line-height: 51rpx;
      letter-spacing: 2rpx;
      margin-top: 52rpx;
    }
    .informationDetail_content_center {
      width: 663rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .informationDetail_content_center_left {
        display: flex;
        align-items: center;
        column-gap: 16rpx;
        .informationDetail_content_center_left_text {
          font-size: 21rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 24rpx;
          letter-spacing: 2rpx;
        }
      }
      .informationDetail_content_center_right {
        font-size: 21rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #cccccc;
        line-height: 24rpx;
        letter-spacing: 2rpx;
      }
    }
    .informationDetail_content_down {
      width: 663rpx;
      margin-top: 48rpx;
      .informationDetail_content_down_img {
        width: 663rpx;
        border-radius: 38rpx 38rpx 38rpx 38rpx;
        opacity: 1;
        overflow: hidden;
        image {
          width: 100%;
        }
      }
      .informationDetail_content_down_text {
        margin-top: 38rpx;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #302b26;
        line-height: 41rpx;
        letter-spacing: 2rpx;
      }
    }
  }
}
</style>
